<div id="account-manage-edit-view">
  <div class="pageheader">
    <h2><i class="fa fa-home"></i>账户信息</h2>
    <!--<div class="al-header-right">-->
    <!--<button type="button" class="btn btn-primary" ng-click="saveSetting()">保存</button>-->
    <!--<button type="button" class="btn btn-default" ng-click="resetAuthority()">重置</button>-->
    <!--</div>-->
  </div>
  <div class="page">
    <div class="al-list-container">
      <form name="modalForm" class="form-horizontal al-search-container" role="form">
        <div class="form-group">
          <label class="col-sm-4 control-label">账号<span class="attr-need">*</span></label>
          <div class="col-sm-8">
            <input class="form-control" ng-model="data.username" type="text"
                   ng-required="true" name="roleName" ng-disabled="type!='new'"
                   placeholder="" maxlength="50"/>
            <div class="help-block with-errors"
                 ng-if="modalForm.roleName.$invalid && !modalForm.roleName.$pristine">
              账号不可为空
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label">名称<span class="attr-need">*</span></label>
          <div class="col-sm-8">
            <input class="form-control" ng-model="data.nickname" placeholder="">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label">密码<span ng-if="type=='new'" class="attr-need">*</span></label>
          <div class="col-sm-8">
            <input class="form-control" ng-model="data.password"
                   ng-required="type=='new'" name="password" ng-pattern="/[0-9|A-Z|a-z]{6,16}/"
                   placeholder="" maxlength="50">
            <div class="help-block with-errors"
                 ng-if="modalForm.password.$invalid && !modalForm.password.$pristine">
              创建用户密码必须为6-12位字母或数字
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label">性别</label>
          <div class="col-sm-8">
              <select ng-model="data.sex" class="form-control"
                      ng-options="option.value as option.name for option in sexList"></select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label">邮箱</label>
          <div class="col-sm-8">
            <input type="email" class="form-control" name="email" ng-model="data.email"
                   placeholder="">
            <div class="help-block with-errors"
                 ng-if="modalForm.email.$invalid && !modalForm.email.$pristine">
              邮箱是非法的
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label">手机</label>
          <div class="col-sm-8">
            <input class="form-control" ng-model="data.phone"
                   name="phone" ng-pattern="/[0-9]{11}/" placeholder="">
            <div class="help-block with-errors"
                 ng-if="modalForm.phone.$invalid && !modalForm.phone.$pristine">
              手机要求是11位
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label">状态</label>
          <div class="col-sm-8">
            <nobr>
              <label class="ui-radio" ng-repeat="option in enabledList">
                <input name="enabled" ng-value="option.value" type="radio" ng-model="data.enabled">
                <span>{{option.name}}</span>
              </label>
            </nobr>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-3"></div>
          <div class="col-sm-3">
            <button class="al-center btn btn-default" ng-click="cancel()">取消</button>
          </div>
          <div class="col-sm-3">
            <button class="al-center btn btn-primary" ng-disabled="modalForm.$invalid" ng-click="confirm()">保存</button>
          </div>
          <div class="col-sm-3"></div>
        </div>
      </form>
      <div class="al-no-data" ng-show="roleData.length==0">
        尚未绑定角色<br>
        <button class="btn btn-primary" ng-click="bindRole()">绑定角色</button>
      </div>
      <table ng-table="tableParams" ng-show="roleData.length>0"
             class="table  table-bordered table-striped table-condensed al-table-container">
        <caption>
          <button style="float:right;" class="btn btn-primary" ng-click="bindRole()">绑定角色</button>
        </caption>
        <thead>
        <tr>
          <th>角色名称</th>
          <th>描述</th>
          <th>类型</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in $data">
          <td>{{item.name}}</td>
          <td>{{item.description}}</td>
          <td>{{item.type|constantTransfer:typeList}}</td>
          <td>{{item.enabled|constantTransfer:enabledList}}</td>
          <td>
            <button class="btn btn-warning btn-sm al-fl-rt"
                    ng-confirm-click="确定要执行移除操作吗？"
                    ng-click="removeRole(item)">移除
            </button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
